<template>
	<view class="my-store-info">
		<view class="head-plate">
			<view class="head-plate-into">
				<view class="my-equip">
					<view class="my-text">我的积分</view>
					<view class="my-number">
						<view class="my-point">
							{{currentIntegral}}
						</view>
						<!-- <view class="CashBtn" @click="Withdrawal">
							提现
						</view> -->
					</view>
				</view>

			</view>
		</view>

		<view class="nav-plate">
			<view class="nav-plate-left">
				<view class="nav-item" v-for="(item,index) in navList" :key="index" :class="{'active':cur==index}"
					@click="tabNav(item,index)">{{item.text}}</view>
			</view>
			<view class="nav-plate-right" @click="openSearch">筛选<u-icon name="search"></u-icon></view>
		</view>
		<view class="list">
			<view class="li-item" v-for="(item,index) in equipList" :key="index">
				<view class="li-item-model">
					<view class="item-child">设备名称</view>
					<view class="item-child">
						{{item.deviceName}}
					</view>
				</view>
				<view class="li-item-model">
					<view class="item-child">{{item.logTypeName}}</view>
					<view class="item-child red-color">{{item.integral}}</view>
				</view>
				<view class="li-item-model">
					<view class="item-child">时间</view>
					<view class="item-child">{{item.addTime}}</view>
				</view>

			</view>

		</view>
		<u-popup :show="showSearch" @close="closeSearch" @open="openSearch" mode="right">
			<view class="search-model">

				<view class="model">
					<view class="model-title">
						按时间
					</view>
					<view class="model-list time-span" @tap="openData">

						
						<u--input
						    placeholder="请输入内容"
						   
						    v-model="currentTime"
						    clearable
						  ></u--input>

					</view>
				</view>
				<view class="model">
					<view class="model-title">
						按设备编号
					</view>
					<view class="model-list">
						<u--input placeholder="请输入设备编号" v-model="searchModel.deviceNumber"></u--input>

					</view>
				</view>

				<view class="sure-search" @click="searchList">确定</view>
			</view>

		</u-popup>
		<u-calendar :show="showDate" mode="range" @confirm="confirm" :allowSameDay="true" :minDate='minDate'
			:maxDate='maxDate' @close="closeDate" monthNum="60"></u-calendar>
		<u-loadmore :status="status" />
	</view>
</template>

<script>
	const app = getApp();
	const globalData = app.globalData;
	const apiUrl = globalData.wxApi;
	const wxImg = globalData.wxImg;
	import {
		getStoreData,
		dealNum,
		httpPost,
		httpGet,
		bdMapToTxMap,
		txMapToBdMap,
	} from "@/utils/http.js";
	import mpMixin from "@/uni_modules/uview-ui/libs/mixin/mpMixin";
	const pic1 = require(`@/img/my/my1.png`);



	export default {
		data() {
			return {
				wxImg,
				apiUrl,
				dealNum,
				pic1,
				navList: [{
					text: "全部",
					type: ""
				}, {
					text: "收入",
					type: 1
				}, {
					text: "支出",
					type: 2
				}],
				cur: 0,
				searchModel: {
					deviceNumber: null,
					pageNo: 1,
					pageSize: 10,
					endTime: "",
					inOrOut: "",
					startTime: ""
				},
				equipList: [],
				status: "loadmore",
				pageTotal: 1,
				pageCount: 0,
				showSearch: false,
				bindCur: null,
				activeCur: null,
				brandList: [],
				type: 1,
				brandCur: null,
				minDate: "",
				maxDate: "",
				currentTime: "",
				showDate: false,
				public: {
					startTime: "",
					endTime: ""
				},
				currentIntegral: 0

			};
		},

		onShow() {

		},
		onUnload() {

		},
		onLoad(options) {
			this.getTime();
			this.getPoints();
			this.getlogList();
		},
		onPullDownRefresh() {
			this.cur = 0;
			this.equipList = [];
			this.searchModel.pageNo = 1;
			this.pageCount = 0;
			this.getlogList();
		},
		onReachBottom() {
			if (this.pageCount >= 10) {
				this.status = 'loading';
				this.searchModel.pageNo++
				this.getlogList();
			} else {
				this.status = 'nomore'
			}

		},
		methods: {
			getTime() {
				let now = new Date();
				let year = now.getFullYear(); // 年
				let month = now.getMonth() + 1; // 月
				let date = now.getDate(); // 日
				var lastDate = new Date(year, month, 0).getDate(); //获取当月最后一日
				if (month < 10) {
					month = "0" + month;
				}
				if (date < 10) {
					date = "0" + date;
				}

				this.public.startTime = year + "-" + month + "-01" + " 00:00:00";
				this.public.endTime = year + "-" + month + "-" + lastDate + " 23:59:59";
				this.currentTime = year + "-" + month + "-01" + "至" + year + "-" + month + "-" + lastDate;


				this.searchModel.startTime = this.public.startTime;
				this.searchModel.endTime = this.public.endTime;
				let minyear = year - 3;
				this.minDate = minyear + '-' + month + '-' + date;
				let maxyear = year + 3;
				this.maxDate = maxyear + '-' + month + '-' + date;


			},
			getPoints() {
				let that = this;
				httpGet("/api/iotmerchantsdevice/myDeviceIntegral")
					.then((res) => {
						uni.stopPullDownRefresh();
						that.currentIntegral = res.data.currentIntegral;
					})
					.catch((e) => {});
			},

			tabNav(data, index) {
				this.cur = index;
				this.equipList = [];
				this.searchModel.pageNo = 1;
				this.searchModel.inOrOut = data.type;
				this.getlogList();

			},
			getlogList() {
				let that = this;
				httpPost("/api/iotmerchantsdevice/myDeviceIntegralLog", this.searchModel)
					.then((res) => {
						console.log(res)
						uni.stopPullDownRefresh();
						if (res.code == 0) {
							this.equipList = [...res.data.list, ...this.equipList];
							this.pageCount = res.data.list.length;
							if (this.pageCount >= 10) {
								this.status = 'loading';
							} else {
								this.status = 'nomore';
							}

						}
					})
					.catch((e) => {});
			},


			closeSearch() {
				this.showSearch = false;
				this.bindCur = null;
				this.activeCur = null;
			},
			openSearch() {
				this.showSearch = true;
			},

			searchList() {
				this.getlogList();
			},

			confirm(e) {
				console.log(e)
				this.public.startTime = e[0] + ' ' + '00:00:00';
				this.public.endTime = e[e.length - 1] + ' ' + '23:59:59';
				this.searchModel.startTime = this.public.startTime;
				this.searchModel.endTime = this.public.endTime;
				this.currentTime = e[0] + "至" + e[e.length - 1];
				this.searchModel.pageNo = 1;
				this.pageTotal = 1;
				this.recordList = [];
				// this.getRecordList();
				this.showDate = false;
			},
			closeDate() {
				this.showDate = false;
			},
			openData() {
				this.showDate = true;
			},
			Withdrawal() {
				if (this.currentIntegral >= 100) {
					uni.navigateTo({
						url: '/pages/user/my-withdrawal?type=14&name=优惠补贴&amount=' + this.moneyInfo
							.currentSubsidyFee
					});
				} else {
					uni.$u.toast("金额不足100，不能提现");
				}

			}

		},
	};
</script>

<style lang="scss">
	.my-store-info {
		background-color: #f5f6f6;
		height: 100vh;
	}


	/deep/ .u-cell__title-text {
		font-size: 28rpx;
	}

	.head-plate {
		background: linear-gradient(to bottom, #329ffc, #fff);
		padding-top: 30rpx;
		padding-bottom: 30rpx;

		.head-plate-into {
			margin-left: 30rpx;
			margin-right: 30rpx;
			background-color: #fff;
			border-radius: 20rpx;
			padding: 30rpx;

			.option-btn-box {
				display: flex;
				flex-direction: row;
				justify-content: space-between;

				.btn-p {
					padding: 10rpx 20rpx;
					color: #fff;
					font-size: 24rpx;
					border-radius: 10rpx;
				}

				.btn-p:nth-child(1) {
					background-color: #fe6906;
				}

				.btn-p:nth-child(2) {
					background-color: #2adae9;
				}

				.btn-p:nth-child(3) {
					background-color: #20ae48;
				}
			}
		}

		.my-equip {
			.my-text {
				font-size: 32rpx;
				text-align: center;
			}

			.my-number {
				font-size: 70rpx;
				display: flex;
				flex-direction: row;
				justify-content: center;
				margin-top: 10rpx;
				margin-bottom: 10rpx;

				.tag {
					font-size: 32rpx;
					padding-top: 36rpx;
				}

				.CashBtn {
					font-size: 28rpx;
					width: 160rpx;
					height: 60rpx;
					line-height: 60rpx;
					text-align: center;
					background-color: #ff6203;
					color: #fff;
					border-radius: 60rpx;
					margin-top: 16rpx;
				}
			}
		}

		.equip-number {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			font-size: 28rpx;
			border-top: 2rpx solid #eee;
			margin-top: 20rpx;
			padding-top: 20rpx;

			.equip-number-item {
				margin-right: 40rpx;
			}
		}
	}

	.nav-plate {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-top: 20rpx;
		padding-bottom: 20rpx;

		.nav-plate-left {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;

			.nav-item {
				margin-right: 20rpx;
				padding: 10rpx 40rpx;
				border-radius: 40rpx;
			}

			.active {

				color: #fff;
				background-color: #329ffc;
			}
		}

		.nav-plate-right {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			line-height: 58rpx;

		}
	}

	.list {
		padding-left: 30rpx;
		padding-right: 30rpx;

		.li-item {
			padding: 20rpx;
			margin-bottom: 20rpx;
			border-bottom: 2rpx solid #eee;
			background-color: #fff;
			border-radius: 10rpx;

			.Active {
				text-align: right;
				line-height: 60rpx;
			}

			.li-item-model {
				display: flex;
				flex-direction: row;
				justify-content: space-between;

				.name {
					font-size: 32rpx;
					font-weight: bold;
					line-height: 60rpx;
				}

				.label {
					color: #ababab;
				}

				.no-activation {
					display: flex;
					flex-direction: row;
					justify-content: flex-end;
				}

				.item-child {
					width: 50%;

					.btn-active {
						width: 90rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						border-radius: 10rpx;
						background-color: #52bff8;
						color: #fff;
						font-size: 24rpx;
					}
				}
			}

			
		}
	}

	.search-model {
		padding: 40rpx 30rpx;
		width: 400rpx;

		.sure-search {
			height: 70rpx;
			line-height: 70rpx;
			background-color: #329ffc;
			color: #fff;
			text-align: center;
			border-radius: 10rpx;

		}

		.model {
			margin-bottom: 40rpx;

			.model-title {
				font-size: 28rpx;
				margin-bottom: 10rpx;
			}

			.model-list {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				flex-wrap: wrap;

				.dd {
					padding: 8rpx 15rpx;
					border: #ababab 2rpx solid;
					margin-left: 20rpx;
					font-size: 24rpx;
					border-radius: 10rpx;
					margin-bottom: 10rpx;
				}

				.active-cur {
					background-color: #fe6906;
					color: #fff;
					border: #fe6906 2rpx solid;
				}

				.bind-cur {
					background-color: #fe6906;
					color: #fff;
					border: #fe6906 2rpx solid;
				}

				.brand-cur {
					background-color: #fe6906;
					color: #fff;
					border: #fe6906 2rpx solid;
				}
			}
		}

		.time-span {
			border-bottom: 2rpx solid #eee;
			line-height: 70rpx;
		}
	}
	.red-color{
		color: #ff6203;
	}
</style>